﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Cld-GoogleMapControl.ascx.cs" Inherits="GoogleMapControl" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show Google Map with Latitude and Longitude in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
.canvas{width: 665px; height: 380px}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">
    function initialize() {       

        var lat = document.getElementById('<%=Hidden1.ClientID%>').value;
        var lon = document.getElementById('<%=Hidden2.ClientID%>').value;
        var myLatlng = new google.maps.LatLng(lat, lon) // This is used to center the map to show our markers
        var mapOptions = {
            center: myLatlng,
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            marker: true
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var marker = new google.maps.Marker({
            position: myLatlng
        });
        marker.setMap(map);
    }
</script>
</head>
<body onload="initialize()" >
   
    <asp:HiddenField ID="Hidden1" runat="server" />
    <asp:HiddenField ID="Hidden2" runat="server" />

<div id="map_canvas" class="canvas"></div>

</body>
</html>